<template>
  <div key="id">
    <div class="flex align-items-center mb-10">
      <div class="mr-10">辅助文字</div>
      <el-switch :model-value="isUse" @change="switchChangeHandle" />
    </div>
    <div v-if="isUse">
      <el-input
        v-for="(_, index) in status"
        :key="index"
        class="mt-5 mb-5"
        placeholder="辅助文字"
        v-model="textArr[index]"
      />
    </div>
  </div>
</template>
<script setup>
import { inject, ref } from 'vue';
const props = defineProps({
  status: Array,
  configKey: String,
  id: String,
  isUse: Boolean,
  currentStatus: Number,
});

const updateStatus = inject('updateStatus', () => {});
const textArr = ref(props.status);

const switchChangeHandle = (pos) => {
  if (updateStatus) {
    updateStatus(props.configKey, pos);
  }
};
</script>

<style scoped></style>
